<template>
    <section class="collect_datadb_form">
  		<el-form ref="form" :model="datadbForm" label-width="106px" class="second_form">
    				<el-form-item label="数据源名称">
					   <el-select filterable  v-model="form.connDatasourceId"  placeholder="请选择">
					    <el-option
					      v-for="item in FTPData"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					  </el-select>
					  <i class="el-icon-circle-plus-outline icon_diy" ></i>
					</el-form-item>
		
				<el-form-item label="数据匹配" style="margin-bottom: 0px;"></el-form-item>
						<el-table
							:data="dataPiPeiTableData"
							style="width: 100%;"
						>
						<el-table-column
						       	align="center"
						       	label="字段名"
						       	>
						      <template slot-scope="scope">
						      	 <el-input v-model="scope.row.tickName" placeholder=""></el-input>
						      </template>
						</el-table-column>	
						
						<el-table-column
						       	align="center"
						       	label="中文名"
						       	>
						      <template slot-scope="scope">
						      		 <el-input v-model="scope.row.chineseName" placeholder=""></el-input>
						      </template>
						</el-table-column>	
										 		
						<el-table-column
						       	align="center"
						       	label="对应元数据"
						       	>
						      <template slot-scope="scope">
						      		<el-select v-model="scope.row.yuanData" placeholder="请选择" @change="chooseYuanData" style="width: 160px;">
									    <el-option
									      v-for="item in wenjianFormYuanDataOptions"
									      :key="item.id"
									      :label="item.name"
									      :value="item.id">
									    </el-option>
									</el-select>
						      </template>
						</el-table-column>
						       
						<el-table-column
						       	align="center"
						       	label=""
						       	>
						      <template slot-scope="scope">
						      	<i class="el-icon-delete"></i>
						      </template>
						</el-table-column>		
						</el-table>
						
						<el-button type="primary" style="margin-top: 15px;" @click="adddataPiPeiTableData">添加</el-button>
		
					<el-form-item label="数据来自 " required  v-if="inputOrOutput==='laiyuan'">
						<el-radio class="first_radio" v-model="datadbForm.wenjianOrftp" label="1" @change="shujulaizi='1'">指定数据表</el-radio>
  						<el-radio class="first_radio" v-model="datadbForm.wenjianOrftp" label="2" @change="shujulaizi='2'">自定义视图</el-radio>
						<el-radio class="first_radio" v-model="datadbForm.wenjianOrftp" label="3" @change="shujulaizi='3'">自定义SQL</el-radio>
	
						<el-input v-show="shujulaizi==='1'" v-model="form.sql" placeholder="请输入sql语句" type="textarea"></el-input>
						<el-input v-show="shujulaizi==='2'" v-model="form.sql" placeholder="请输入sql语句" type="textarea"></el-input>
						<el-input v-show="shujulaizi==='3'" v-model="form.sql" placeholder="请输入sql语句" type="textarea"></el-input>
					</el-form-item>
					
					
					<el-form-item label="数据来自 " required  v-if="inputOrOutput==='mudi'">
						<el-input  v-model="form.filePath" placeholder="请输入sql语句" type="textarea"></el-input>
					</el-form-item>
		
  		</el-form>
    			
        
    </section>
</template>

<script>
     import {
    	componentGetYuanData2Type,
    	componentGetFTPData
    } from "../../common/js_css_img/serverResourceComputed"
    export default {
    	components:{
    	},
    	props:{
    		timeSubmit :Boolean,
    		resourceWeb:Number,
    		inputOrOutput:"",
    	},
        data() {
          return {
          	shujulaizi:"",
          	sqlTimeOutwenjian:false,
          	sqlTimeOutjiekou:false,
          	createdSqlwenjian:'',
          	createdSqlJiekou:'',
          	SQLdialogVisibleWenjian:false,
          	SQLdialogVisibleJiekou:false,
          	sqLradio:'',
          	checked1:false,
          	checked2:false,
          	outPutTabletimeOut:false,
          	outPutTabletimeOut2:false,
          	activeName2:'first',
          	checkRule:["","=","<",">","<=",">="],
          	form:{ /*数据表的来源和输出都是这里的*/
						"type":3 
						,"connDatasourceId":'' 
					    ,"filePath":""
					    ,"fileName":"文件"
					    ,"sql":''
						,"outputDataFormList":[
							{
								"key":"1"
								,"name":"思密达" 
								,"metaDataId":1 
							}
						]
						,"inputDataFormList":[ 
								{
									"key":"sex" 
									,"name":"布鲁斯" 
									,"metaDataId":1
									,"position":1 
								}
						]
			},
          	datadbForm:{
          		dataOriginName:'',
          		backData:[],
				wenjianType:[],
				backAdress:'',
				backAdressInput:'',
				sql:'',
				formName:'',
				wenjianOrftp:"",
          	},
          	FTPData:[
          		
          	],
          	dataPiPeiTableData:[
          		
          	],
          	wenjianFormYuanDataOptions:[],

          	wenjianFormTable1Data:[],
          };
          
        },
        methods: {
        	    chooseYuanData(val){
        			console.log(val);
        			console.log(this.wenjianFormYuanDataOptions);
        			if(this.inputOrOutput==='laiyuan'){
        				/*插入到vuex，为下面去领取*/
        				let pushYuanData = this.forYuanData(val);
        				this.$store.commit('pushYuanData', pushYuanData);
        				console.log(this.$store.state.collectServer.yuanData);
        			}
        		},
				outPutTableData(val){
					console.log(val);
				},
				adddataPiPeiTableData(){
	        		this.dataPiPeiTableData.push(
	        			{
		          			yuanData:"",
			          		chineseName:'',
			          		tickName:'',
	          			}
	        		)
        		},
        		forYuanData(val){/*循环挑选元数据*/
        			let param={};
        			for(let i in this.wenjianFormYuanDataOptions){
        				if(this.wenjianFormYuanDataOptions[i].id ===val){
        					param = this.wenjianFormYuanDataOptions[i];
        					break;
        				}
        			}
        			return param
        		}

        },
        mounted(){
			if(this.inputOrOutput==='laiyuan'){
        			componentGetYuanData2Type(this,{},1);/*获取采集类的元数据*/
        	}else if(this.inputOrOutput==='mudi'){
        			this.wenjianFormYuanDataOptions = this.$store.state.collectServer.yuanData;
        	}
        },
        watch:{
        	resourceWeb(newVal){
        		componentGetFTPData(this,3,newVal);/*数据源选择*/
        	},
        	timeSubmit(newVal){
        		if(this.inputOrOutput==='laiyuan'){
        			for (let i in this.dataPiPeiTableData){
	        			this.form.outputDataFormList.push(
	        				{
	        					"key":this.dataPiPeiTableData[i].tickName
								,"name":this.dataPiPeiTableData[i].chineseName
								,"metaDataId":this.dataPiPeiTableData[i].yuanData
								,"position":i
	        				}
	        			)
        			}
        		}
				
				
				if(this.inputOrOutput==='文件保存到'){
        			for (let i in this.dataPiPeiTableData){
	        			this.form.inputDataFormList.push(
	        				{
	        					"key":this.dataPiPeiTableData[i].tickName
								,"name":this.dataPiPeiTableData[i].chineseName
								,"metaDataId":this.dataPiPeiTableData[i].yuanData
								,"position":i
	        				}
	        			)
        			}
        		}
        		
        		this.$emit("outPutForm",this.form);
        	}
        	
        	
        }
  };
</script>

<style scoped="scoped">
	.collect_datadb_form .icon_diy{
		font-size: 20px;
		vertical-align: middle;
	}
	
	div#tab-first{
		 text-align: right !important;
	     padding-right: unset !important; 
	     margin-left: unset !important; 
	}
	
	.diy_label{
		text-align: right;
	    vertical-align: middle;
	    float: left;
	    font-size: 14px;
	    color: #606266;
	    line-height: 40px;
	    padding: 0 12px 0 0;
	    box-sizing: border-box;
	}
	

</style>